<template>
  <div>
    <div class="title">审理</div>
    <div class="title-box">
<!--      <el-checkbox-group v-model="checkboxGroup2" @change="changeEdu">-->
<!--        <el-checkbox-button v-for="item in auditList" :label="item.id">{{item.realName}}</el-checkbox-button>-->
<!--      </el-checkbox-group>-->
        <el-radio-group v-model="checkboxGroup2" @input="changeIds">
          <el-radio-button v-for="item in auditList" :label="item.id" @click="">{{item.realName}}</el-radio-button>
        </el-radio-group>
    </div>
    <div class="content" v-if="tabId==2">
      <el-input
        type="textarea"
        maxlength="500"
        :autosize="{ minRows: 10, maxRows: 4}"
        :placeholder="psInfo.examineRemark==''?'请输入未通过理由':psInfo.examineRemark"
        v-model="content">
      </el-input>
    </div>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import { infobyconditionApi, topdetailApi, updateFormDep } from '@/api/user'
import {Debounce} from '@/utils/validate'
import { getFormById, getFormStatus, updateForm, getFormRemarkById, getSelectAdmin } from '@/api/computer'
import store from '@/store'
import Cookies from 'js-cookie'
import { checkPermi } from '@/utils/permission'
import * as systemAdminApi from '@/api/systemadmin'
import item from '@/layout/components/Sidebar/Item.vue'
import { adminExamineApi, allocationApi } from '@/api/categoryApi'
export default {
  name: "PhotoDetails",
  props:['id','Close4'],
  data() {
    return {
      tabId:1,
      adminUserId:0,
      examine: 2,
      content:'',
      checkboxGroup2:[],
      hearList:[],
      listPram: {
        username: '',
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      auditList:[{
        id:1,
        realName:'审理通过',
      },{
        id:2,
        realName:'未通过',
      }
      ],
      JavaInfo: JSON.parse(Cookies.get("JavaInfo")),
      loading: false,
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      list: [
        { val: '0', label: '问题描述' },
        { val: '4', label: '身份证图片' },
        { val: '1', label: '详细地址' },
        { val: '2', label: '证据材料' },
        { val: '3', label: '处理结果' },
      ],
      tableFrom: {
        type : '0',
        userId : ''
      },
      pram: {
        situation:[],
      },
      rules: {
        situation:[{ required: true, message: '是否曾经通过以下途径反映上述情况', trigger: ['blur', 'change'] }],
        // swiperImage:[{ required: true, message: '请上传证据材料', trigger: ['blur', 'change'] }],
      },
      typeList:[],
      statusList:[],

      psInfo: {
        user:{},
        photo:{},
        faceUrl:'',
        userName:'',
        typeText:'',
        description:'',
        mobile:'',
        picList:[],
        video:'',
        remark:'',
        depId:null,
        appeal:null,
        idCardBack:'',
        idCardFront:'',
        idCardFrontList:[],
        idCardBackList:[]
      },
      tipsText:'',

      //派件
      departmentList:[],
      termList:[],
      dialogVisible: false,//派件dialog
      dynamicValidateForm:{
        id:0,
        depId: '',
        termId:'',
      },

      //单位处理信息
      formRemark:{
        content:'',
        picList:[]
      }
    }
  },
  mounted(){
    if(this.id){
      this.initEditData()
      //this.initTypeList()
      this.changeType(this.tableFrom.type)
    }
    if(this.JavaInfo.roles !== 1){
      //主管单位
      this.list = this.list.filter(function(item){
        return item.val !== '3'
      })
    }
  },
  methods: {
    changeIds(ids){
      this.examine = ids
      this.tabId = ids
    },
    changeEdu(ids){
      this.adminUserId = ids[0]
      this.$emit('adminUserId', ids[0]);
      this.g=this.hearList.filter(item=>ids.includes(item.id)).map(item=>item.data).join(',');
      this.eduId = ids.join(',');
    },
    getAdminExamineApi(id1){
      adminExamineApi({id : id1,examine:this.examine ,examineRemark:this.content}).then(res => {
        this.$message.success('审核成功')
        this.Close4();
      }).finally(()=>{
      })
    },

    initEditData() {
      this.typeList = this.allTypeList
      this.termList = this.allTermList
      getFormRemarkById({id : this.id}).then(res => {
        this.psInfo = res
        if(res){
          this.pram.status = [0,1,2,5].indexOf(res.status)!==-1?null:res.status
          this.psInfo.picList=res.pdfUrl.length > 0 ? res.pdfUrl.split(',') : []
        }
        //this.pram = {...res.photo}
      })
    },
    initTypeList() {
      this.loading = true
      getFormStatus().then(res => {
        res = res.filter(function(item){
          return [3,4].indexOf(item.value)!==-1
        })
        this.statusList = res

        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    changeType(key) {
      this.tableFrom.type = key
      if(key === '3'){
        this.getFormRemarkInfo()
      }
    },
    getFormRemarkInfo() {
      this.loading = true
      getFormRemarkById( {id:this.id}).then(res => {
        if(res){
          this.formRemark.content = res.content
          this.formRemark.picList = res.url
        }
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },

    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid || !this.id) return
        this.handlerEdit()
      })
    }),
    handlerEdit() {
      this.pram.id = this.id
      updateForm(this.pram).then(data => {
        this.$message.success('处理成功')
        this.$emit('hideEditDialog')
      })
    },

    //派件
    setAssign(row){
      if(row){
        this.dynamicValidateForm.id = row.id
        roleApi.getFormDepartment({id:this.dynamicValidateForm.id}).then(res => {
          this.departmentList = res;

          let arr = [];
          res.forEach(item=>{
            arr.push(item.id);
          })
          if(!arr.includes(Number.parseInt(this.dynamicValidateForm.depId))){
            this.$set(this.dynamicValidateForm,'depId','');
          }
        })

        let arr1 = [];
        this.termList.forEach(item=>{
          arr1.push(item.id);
        })
        if(!arr1.includes(Number.parseInt(this.dynamicValidateForm.termId))){
          this.$set(this.dynamicValidateForm,'termId','');
        }
        this.dynamicValidateForm.depId = row.depId?Number(row.depId):''
        this.dynamicValidateForm.termId = row.termId?Number(row.termId):''
      }else{
        this.dynamicValidateForm.id = 0
        this.dynamicValidateForm.depId = ''
        this.dynamicValidateForm.termId = ''
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.dialogVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          updateFormDep({termId:this.dynamicValidateForm.termId, depId: this.dynamicValidateForm.depId, id: this.dynamicValidateForm.id}).then(res => {
            this.$message.success('派件成功')
            this.loading = false
            this.Close()

            this.initEditData()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false;
        }
      });
    },
    Close() {
      this.hideEditDialog1 = false
      // this.$refs['dynamicValidateForm'].resetFields();
    },

    //以下方法已弃用
    handleRemove (i) {
      this.pram.sliderImages.splice(i, 1)
    },
    handleRemoveVideo () {
      this.pram.video = ''
    },
    // 点击商品图
    modalPicTap (tit, num, i,status) {
      const _this = this;
      if(_this.isDisabled) return;
      this.$modalUpload(function(img) {
        if(tit==='2'&& !num){
          if(img.length>6) return this.$message.warning("最多选择6张图片！");
          if(img.length + _this.pram.sliderImages.length > 6) return this.$message.warning("最多选择6张图片！");
          img.map((item) => {
            _this.pram.sliderImages.push(item.attDir)
          });
        }
      },tit, 'content')
    },

    // 移动
    handleDragStart (e, item) {
      if(!this.isDisabled) this.dragging = item;
    },
    handleDragEnd (e, item) {
      if(!this.isDisabled) this.dragging = null
    },
    handleDragOver (e) {
      if(!this.isDisabled) e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      if(!this.isDisabled){
        e.dataTransfer.effectAllowed = 'move'
        if (item === this.dragging) {
          return
        }
        const newItems = [...this.pram.sliderImages]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.pram.sliderImages = newItems;
      }
    },
  }
}
</script>
<style scoped lang="scss">
.title{
  font-size: 18px;
  margin:  0 0 20px 0;
  color: #333333;

}
.title-box{
  width: 100%;
  display: flex;
}
.dialog-footer{
  padding: 10px;
  text-align: right;
  margin-top: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #dcdfe6;
}

.audit{
  width: calc(100% - 40px)/4;
  height: 100%;
  padding: 20px;
  border: 1px solid #dcdfe6;
  margin: 0 20px;
}
.textarea-no-border{
  ::v-deep.el-textarea__inner{
    border:none!important;
    padding:7px 0;
    font-family: 'arial,sans-serif';
    font-size:14px;
  }
}
.avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 18px;
  img{
    width: 100%;
    height: 100%;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 95%;
      display: inline-block;
      vertical-align: middle;
      margin-top: -12px;
      &-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 18px;
        padding: 10px 0 10px;
      }

      &-desc {
        &-sp {
          width: 24%;
          color: #17233D;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.pb-1{
  padding-bottom: 10px;
}
.mr20{
  margin: 0 20px;
}
.border_bottom{
  border-bottom: 1px solid #E7EAEC;
}
.pb-24{
  padding-bottom: 24px;
}
.title-desc{
  font-size:16px;
  color:#087fff;
  font-weight:bold;
  margin:0 0 20px 10px;
}

.pictrue{
  width: 120px;
  height: 120px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  .photo-el-image{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.videoBox{
  width: 300px;
  height: 180px;
  //border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  border-radius:15px;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
    border-radius:15px;
  }
}
.btndel{
  position: absolute;
  z-index: 1;
  width :20px !important;
  height: 20px !important;
  font-size:20px;
  left: 92px;
  top: -4px;
}
.video-btndel{
  left: 282px;
  top: 1px;
}
.tips{
  color: #c0c4cc;
  font-size:14px;
}
.img{
  width: 420px;
  height: 250px;
}
</style>
